<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加技能</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; }
        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .header { background-color: #3498db; color: white; text-align: center; padding: 20px; }
        .nav { background-color: #2980b9; overflow: hidden; }
        .nav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
        .nav a:hover { background-color: #1abc9c; }
        .footer { background-color: #34495e; color: white; text-align: center; padding: 10px; position: fixed; bottom: 0; width: 100%; }
        
        .card { background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin: 20px 0; padding: 20px; }
        .card h2 { color: #3498db; margin-top: 0; }
        .card-item { padding: 10px; margin: 10px 0; }
        .card-item a { color: #2980b9; text-decoration: none; font-weight: bold; }
        .card-item a:hover { text-decoration: underline; }
        
        .columns { display: flex; flex-wrap: wrap; gap: 20px; }
        .column { flex: 1; min-width: 280px; }
        
        form { max-width: 600px; margin: 0 auto; }
        label { display: block; margin-bottom: 5px; font-weight: 500; }
        input, select, textarea { 
            width: 100%; 
            padding: 8px; 
            margin-bottom: 15px; 
            border: 1px solid #ddd; 
            border-radius: 4px; 
            box-sizing: border-box;
        }
        .form-group { margin-bottom: 15px; }
        .form-group-inline { display: flex; gap: 10px; }
        input[type="submit"] {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        input[type="submit"]:hover {
            background-color: #2980b9;
        }
        .info-text {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>添加宠物技能</h1>
    </div>
    
    <div class="nav">
        <a href="petList">图鉴</a>
        <a href="home">攻略</a>
        <a href="myInfo">我的</a>
    </div>
    
    <div class="container">
        <div class="card">
            <form action="addSkill" method="post">
                <input type="hidden" name="petNumber" value="${param.petNumber}">
                
                <div class="form-group">
                    <label for="name">技能名称：</label>
                    <input type="text" id="name" name="name" required>
                </div>
                
                <div class="form-group">
                    <label for="number">技能编号：</label>
                    <input type="text" id="number" name="number" required>
                </div>
                
                <div class="form-group">
                    <label for="power">技能威力：</label>
                    <input type="number" id="power" name="power" min="0" required>
                </div>
                
                <div class="form-group">
                    <label for="pp">技能PP：</label>
                    <input type="number" id="pp" name="pp" min="0" max="40" required>
                </div>
                
                <div class="form-group">
                    <label for="introduction">技能介绍：</label>
                    <textarea id="introduction" name="introduction" rows="4" required></textarea>
                </div>
        
                <input type="submit" value="提交">
            </form>
        </div>
    </div>
   
</body>
</html>